<template>
	<view>
		<view class="nav">
			<view class="go-back iconfont" @click="goback">
				&#xe602;
			</view>
			<view class="btn-box">
				<view class="btn-item" :class="{active:clickItem==index}" v-for="(item,index) in items" @click="tabItem(index)">
					{{item.tab}}
				</view>

			</view>
			<view class="iconfont" @click="" v-show="clickItem==0">
				&#xe60f;
			</view>
			<view class="set-btn" @click="" v-show="clickItem==1">
				编辑
			</view>
		</view>
		<view class="search">
			<searchTemp></searchTemp>
		</view>
		<view class="biaoqian-box" v-show="clickItem==0">
			<view class="biaoqian-item">
				国企大机构背景
			</view>
			<view class="biaoqian-item">
				国企大机构背景
			</view>
			<view class="biaoqian-item">
				国企大机构背景
			</view>
			<view class="biaoqian-item">
				国企大机构背景
			</view>
			<view class="biaoqian-item">
				国企大机构背景
			</view>
			<view class="biaoqian-item">
				111
			</view>
			<view class="biaoqian-item">
				111
			</view>
			<view class="biaoqian-item">
				111
			</view>
			<view class="biaoqian-item">
				111
			</view>
		</view>
		<view class="zichan-box" v-show="clickItem==1">
			<view class="zichan-item">
				<view class="zichan-item-top">
					固定收益
				</view>
				<view class="zichan-item-bot">
					银行资管
				</view>
			</view>
			<view class="zichan-item">
				<view class="zichan-item-top">
					流动性资产
				</view>
				<view class="zichan-item-bot">
					券商监管
				</view>
			</view>
			<view class="zichan-item">
				<view class="zichan-item-top">
					固定收益
				</view>
				<view class="zichan-item-bot">
					银行资管
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchTemp from '../../../../../../components/search-temp.vue'
	export default {
		components: {
			searchTemp
		},
		data() {
			return {
				clickItem: 0,
				items: [{
					id: 0,
					tab: '客户标签'
				}, {
					id: 1,
					tab: '选择资产'
				}]
			};
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			tabItem(index) {
				if (this.clickItem !== index) {
					this.clickItem = index;
				}
			},
		},
	}
</script>

<style>
	.nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 34px 15px 15px 18px;
		background: rgba(249,249,249,1);

	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 160px;
		border-radius: 10upx;
		box-sizing: border-box;
		margin: 0 auto;
		overflow: hidden;
		border: 1px solid rgba(196, 156, 90, 1);

	}

	.btn-item {
		flex: 1;
		text-align: center;
		line-height: 27px;
		box-sizing: border-box;
		color: rgba(196, 156, 90, 1);
	}

	.btn-item:first-child {
		border-right: 1px solid rgba(196, 156, 90, 1);
	}

	.active {
		color: rgb(255, 255, 255);
		background: rgba(196, 156, 90, 1);
	}

	.set-btn {
		width: 45px;
		line-height: 22px;
		border: 1px solid rgba(196, 156, 90, 1);
		border-radius: 22upx;
		color: rgba(196, 156, 90, 1);
		text-align: center;
	}

	.go-back {
		font-size: 17px;
	}

	.search {
		width: 100%;
	}

	.biaoqian-box {
		background: rgb(255, 255, 255);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 30upx;
		justify-content: flex-start;
	}

	.biaoqian-item {
		background: rgba(245, 245, 245, 1);
		border-radius: 30upx;
		color: #333;
		padding: 9px 12px;
		margin-bottom: 10px;
		margin-right: 5px;
		font-size: 12px;

	}

	.zichan-box {
		padding: 0 30upx;
		background: rgb(255, 255, 255);

	}

	.zichan-item {
		height: 64px;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.zichan-item-top {
		font-size: 18px;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);

	}

	.zichan-item-bot {

		font-weight: 500;
		color: rgba(153, 153, 153, 1);

	}
</style>
